

//	function checkCoords()
//	{
//		if (parseInt($('#w').val())) return true;
//		alert('Please select a crop region then press submit.');
//		return false;
//	};



	


var create_jcrop = function (main_canvas, src_img, src_img_size, preview_img_size){
	
	
	
  var temp_size = preview_img_size.split(/x/);
  var preview_img_w = parseInt(temp_size[0]);
  var preview_img_h = parseInt(temp_size[1]);
  
  
  create_canvas(main_canvas, src_img, preview_img_w, preview_img_h);
  
	var aspectRatio= preview_img_w / preview_img_h;
  
  temp_size = src_img_size.split(/x/);
   
  var image_w = parseInt(temp_size[0]);
  var image_h = parseInt(temp_size[1]);
		
	var init_x = (image_w - preview_img_w ) /2;
  var init_y = (image_h - preview_img_h ) /2;

	$("#"+main_canvas+" .preview_holder").width(preview_img_w);
	$("#"+main_canvas+" .preview_holder").height(preview_img_h);

	
	var updateCoords = function (c){
		$("#"+main_canvas+" .x_coordinate").val(c.x);
		$("#"+main_canvas+" .y_coordinate").val(c.y);
		$("#"+main_canvas+" .width").val(c.w);
		$("#"+main_canvas+" .height").val(c.h);
		$("#"+main_canvas+" .zoom").val(preview_img_w/c.w);
		
		showPreview(c);
	};
	

  var showPreview = function (coords){
		var rx = coords.w != 0 ? preview_img_w / coords.w : 0;
		var ry = coords.h != 0 ? preview_img_h / coords.h : 0;
	
		$("#"+main_canvas+" .preview").css({
			width     : Math.round(rx * 500) + 'px',
			Height    : Math.round(ry * 370) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop : '-' + Math.round(ry * coords.y) + 'px'
		});
	};	

	var option={
    	onchange: showPreview,		      
	  	onSelect: updateCoords,
		  aspectRatio: aspectRatio,
			setSelect:   [ init_x, init_y, init_x+preview_img_w, init_y+preview_img_h ]
	};

  var div_name = "#"+main_canvas+" .cropbox";

	var jcrop_api = $.Jcrop(div_name, option);
	
		
	$("#"+main_canvas+" .resize_1to1").click( function(){
    	var curr_coord = jcrop_api.tellScaled();      	
	  jcrop_api.setSelect([curr_coord.x,curr_coord.y,curr_coord.x+preview_img_w, curr_coord.y+preview_img_h]);
    updateCoords( jcrop_api.tellScaled() ); 
  });	
	
  updateCoords( jcrop_api.tellScaled() );	
  return jcrop_api;
}


function create_canvas(main_canvas,src_img, thumbnail_w, thumbnail_h){
	

  var canvas_html  = "<div class=\"jcrop_canvas\"><div style=\"float:left;\"><img src=\""+src_img+"\" class=\"cropbox\" /></div><div style=\"float:left;\"><div style=\"overflow: hidden; width: 100px; height: 100px; margin-left: 5px;\" class=\"preview_holder\"><img src=\""+src_img+"\" class=\"preview\"></div></div><div style=\"clear:both;\">";
      canvas_html += "x:<input type=\"text\" size=\"2\" class=\"x_coordinate\" name=\"x\"  />y:<input type=\"text\" size=\"2\" class=\"y_coordinate\" name=\"y\" />w:<input type=\"text\" size=\"2\" class=\"width\" name=\"w\" />h:<input type=\"text\" size=\"2\" class=\"height\" name=\"h\" />%:<input type=\"text\" size=\"2\" class=\"zoom\" name=\"zoom\" />";
      canvas_html += "<input class=\"resize_1to1\" type=\"button\"  value=\"1:1\" />";
      canvas_html += "Thumbnail <input type=\"text\" size=\"3\" class=\"thumbnail_w\" name=\"thumbnail_w\" value=\""+thumbnail_w+"\"  />x";
      canvas_html += "<input type=\"text\" size=\"3\" class=\"thumbnail_h\" name=\"thumbnail_h\" value=\""+thumbnail_h+"\"  />";
      canvas_html += "</div>";

  var main_canvas_div=document.getElementById(main_canvas);
  if(main_canvas_div){
    main_canvas_div.innerHTML= canvas_html;
  };


}